<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="话题名称" prop="topicName">
        <el-input v-model="ruleForm.topicName" placeholder="请输入话题名称" maxlength="15"></el-input>
      </el-form-item>
      <el-form-item label="话题类型" prop="topicTypeId">
        <el-select v-model="ruleForm.topicTypeId" placeholder="请选择话题类型" style="width:100%">
          <el-option
            v-for="item in allTheme"
            :key="item.typeId"
            :label="item.typeName"
            :value="item.typeId"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="导语" prop="topicDesc">
        <el-input v-model="ruleForm.topicDesc" placeholder="请输入话题简单介绍30字内"></el-input>
      </el-form-item>

      <el-form-item label="话题封面" prop="topicFigureImg">
        <el-upload
          ref="upPhoto"
          :action="baseUrl"
          :file-list="fileList"
          :limit="1"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-change="handlechangee"
          :on-success="handlesuccess"
          :class="{typeShow:typeShow}"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisibles" append-to-body>
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
      </el-form-item>

      <el-form-item>
        <el-button style="margin-left:126px" type="primary" @click="submitForm('ruleForm')">保存</el-button>
         <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
        <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import base from "@/views/api/base";
export default {
  props: {
    topicId: Number,
    allTheme: Array,
    typeShow: Boolean //修改状态
  },
  data() {
    return {
      // 图片展示
      // typeShow: true,
      // 接口地址
      baseUrl: "",
      dialogImageUrl: "",
      dialogVisibles: false,
      ruleForm: {
        topicName: "",
        topicTypeId: "",
        topicDesc: "",
        topicFigureImg: ""
      },
      rules: {
        topicName: [
          { required: true, message: "请输入话题名称", trigger: "blur" }
        ],
        topicTypeId: [
          { required: true, message: "请选择话题类型", trigger: "change" }
        ],
        topicDesc: [
          {
            required: true,
            message: "请输入话题简单介绍30字内",
            trigger: "change"
          },
          { min: 3, max: 30, message: "长度在 3 到 30 个字符", trigger: "blur" }
        ],
        topicFigureImg: [
          { required: true, message: "请上传话题封面", trigger: "change" }
        ]
      },
      fileList: []
    };
  },

  mounted() {
    // 上传地址
    this.baseUrl = base.sq + "/yuanjiu/upload/uploadImg";
    // this.fetchData(this.topicId);
    // 图片回显
    // if (this.fileList) this.type = true;
  },
  // watch: {
  //   topicId(val) {
  //     this.fetchData(val);
  //   }
  // },
  methods: {
    // 加载数据
    fetchData(val) {
      // this.fileList = [];
      this.ruleForm = val;
      this.fileList = new Array({
        url: val.topicFigureImg
      });
      // 打印测试数据
      if (val.topicId) this.typeShow = true;
      else this.typeShow = false;
      console.log("测试数据", this.typeShow);
      console.log("获取父组件组件的数据", val);
    },
    // 如果是新建话题隐藏数据
    newAddclick(val) {
      if (val) {
        this.typeShow = false;
        this.$refs.upPhoto.clearFiles();
        delete this.ruleForm.topicId;
        delete this.ruleForm.createName;
        delete this.ruleForm.userId;
        delete this.ruleForm.topicCreateTime;
        this.$refs["ruleForm"].resetFields();
      }
      console.log("获取数据", val);
    },
    // 图片上传成功
    handlesuccess(response) {
      this.ruleForm.topicFigureImg = response.result;
      console.log("response", response.result);
    },
    // 移出事件
    handleRemove(file, fileList) {
      this.typeShow = fileList.length >= 1;
      console.log(file, fileList);
    },
    // 上传成功change事件
    handlechangee(file, fileList) {
      this.typeShow = fileList.length >= 1;
      console.log(file, fileList);
    },

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisibles = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$emit("ruleForm", this.ruleForm);
          console.log("向后台传输的数据", this.ruleForm);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      // this.typeShow=false;
      // this.fileList=[];
      // this.$refs.upPhoto.clearFiles();
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style lang="scss" scoped>
// 店铺封面照片
.typeShow ::v-deep .el-upload--picture-card {
  display: none;
}
.el-upload-list__item {
  transition: none !important;
}
</style>